// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal, Modal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { getUser } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, Layout, RefreshScrollView } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { size, ScreenWidth } from '../../util/utils.js'

class User extends Component {

  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      refreshing: false
    }
  }

  componentDidMount() {

  }

  onClose = () => {
    console.log('关闭')
    this.setState({ visible: false })
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    getUser().finally(() => {
      this.setState({
        refreshing: false
      })
    })
  }


  render() {
    const { userInfo } = this.props
    const { visible, refreshing } = this.state
    return (
      <Layout style={{ backgroundColor: '#0A0C21' }} statusStyle={{}}>
        <NavBar
          type="transparent"
          title="个人中心"
        />
        <RefreshScrollView
          style={Style.content}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
        >
          <View style={{ marginTop: 16, }}>
            <TouchableOpacity onPress={() => Actions.setting()}>
              <View style={{ backgroundColor: '#334185', paddingTop: .5, marginBottom: 16, marginHorizontal: 12, borderRadius: 8 }}>
                <View style={{ backgroundColor: '#232B54', flexDirection: 'row', alignItems: 'flex-start', padding: 12, borderRadius: 8 }}>
                  <TouchableOpacity onPress={() => Actions.userInfo()}>
                    <View style={{ width: 44, height: 44, position: 'relative' }}>
                      {/* <Image resizeMode='cover' style={{ position: 'absolute', width: 18, height: 15, top: -7, left: -1.5 }} source={require('../../static/images/icon-hot.png')} /> */}
                      <View style={{}}>
                        <Image resizeMode='cover' source={{ uri: userInfo.headImg || '' }} style={{ width: 44, height: 44, borderRadius: 22, backgroundColor: '#fff' }} />
                      </View>
                    </View>
                  </TouchableOpacity>
                  <View style={{ marginLeft: 15 }}>
                    <View style={{ marginBottom: 8, flexDirection: 'row', }}>
                      <Text style={{ fontSize: 14, color: '#E4E4E4', lineHeight: 20, }}>{userInfo.nickName}</Text>
                      <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 20, marginLeft: 10 }}>{userInfo.id}</Text>
                    </View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', }}>
                      <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, }}>{userInfo.signature}</Text>
                    </View>
                  </View>
                </View>
              </View>
            </TouchableOpacity>
            <View style={{ paddingHorizontal: 16, }}>
              <TouchableOpacity onPress={() => Actions.exchange({ active: 3 })}>
                <View style={{ flexDirection: 'row', alignItems: 'center', height: 60, }}>
                  <View style={{ marginRight: 8 }}><Image resizeMode='cover' style={{ width: 16, height: 16 }} source={require('../../static/images/icon-search.png')} /></View>
                  <View style={{ flex: 1 }}><Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>我的实盘</Text></View>
                  <View style={{}}>
                    <Icon name="ios-arrow-forward" size={14} color={'#fff'} style={{ marginRight: 8 }} />
                  </View>
                </View>
              </TouchableOpacity>
              <View style={{ height: .5, backgroundColor: '#232B54' }} />
              <TouchableOpacity onPress={() => Actions.verifyPhone()}>
                <View style={{ flexDirection: 'row', alignItems: 'center', height: 60, }}>
                  <View style={{ marginRight: 8 }}><Image resizeMode='cover' style={{ width: 16, height: 16 }} source={require('../../static/images/icon-search.png')} /></View>
                  <View style={{ flex: 1 }}><Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>重置密码</Text></View>
                  <View style={{}}>
                    <Icon name="ios-arrow-forward" size={14} color={'#fff'} style={{ marginRight: 8 }} />
                  </View>
                </View>
              </TouchableOpacity>
              <View style={{ height: .5, backgroundColor: '#232B54' }} />
              <TouchableOpacity>
                <View style={{ flexDirection: 'row', alignItems: 'center', height: 60, }}>
                  <View style={{ marginRight: 8 }}><Image resizeMode='cover' style={{ width: 16, height: 16 }} source={require('../../static/images/icon-search.png')} /></View>
                  <View style={{ flex: 1 }}><Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>通知中心工具设置</Text></View>
                  <View style={{}}>
                    <Icon name="ios-arrow-forward" size={14} color={'#fff'} style={{ marginRight: 8 }} />
                  </View>
                </View>
              </TouchableOpacity>
              <View style={{ height: .5, backgroundColor: '#232B54' }} />
              <TouchableOpacity onPress={() => Actions.binding()}>
                <View style={{ flexDirection: 'row', alignItems: 'center', height: 60, }}>
                  <View style={{ marginRight: 8 }}><Image resizeMode='cover' style={{ width: 16, height: 16 }} source={require('../../static/images/icon-search.png')} /></View>
                  <View style={{ flex: 1 }}><Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>绑定公众号</Text></View>
                  <View style={{}}>
                    <Icon name="ios-arrow-forward" size={14} color={'#fff'} style={{ marginRight: 8 }} />
                  </View>
                </View>
              </TouchableOpacity>
              <View style={{ height: .5, backgroundColor: '#232B54' }} />
              <TouchableOpacity onPress={() => this.setState({ visible: true })}>
                <View style={{ flexDirection: 'row', alignItems: 'center', height: 60, }}>
                  <View style={{ marginRight: 8 }}><Image resizeMode='cover' style={{ width: 16, height: 16 }} source={require('../../static/images/icon-search.png')} /></View>
                  <View style={{ flex: 1 }}><Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>分享应用</Text></View>
                  <View style={{}}>
                    <Icon name="ios-arrow-forward" size={14} color={'#fff'} style={{ marginRight: 8 }} />
                  </View>
                </View>
              </TouchableOpacity>
              <View style={{ height: .5, backgroundColor: '#232B54' }} />
            </View>
          </View>
        </RefreshScrollView>
        <Modal
          visible={visible}
          animationType="slide-up"
          onClose={this.onClose}
          popup={true}
          maskClosable={true}
          style={{
            backgroundColor: '#181E3A',
            borderTopLeftRadius: 16,
            borderTopRightRadius: 16,
          }}
        >
          <View style={{}}>
            <View style={{ flexDirection: 'row', alignItems: 'center', height: 46, paddingHorizontal: 16 }}>
              <View style={{ width: 22, height: 22 }}></View>
              <View style={{ alignItems: 'center', flex: 1 }}>
                <Text style={{ fontSize: 16, color: '#E4E4E4', lineHeight: 22, }}>分享</Text>
              </View>
              <TouchableOpacity onPress={this.onClose} style={{ width: 22, height: 22 }}>
                <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/icon-close-modal.png')} />
              </TouchableOpacity>
            </View>
            <View style={{ height: .5, backgroundColor: '#232B54' }} />
            <View style={{ padding: 15, flexDirection: 'row', }}>

              <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
                <View style={{ alignItems: 'center', justifyContent: 'center', }}>
                  <Image resizeMode='cover' style={{ width: 52, height: 52 }} source={require('../../static/images/sherd1.png')} />
                  <Text style={{ fontSize: 13, color: '#8A90A8', lineHeight: 18, marginTop: 13 }}>微信</Text>
                </View>
              </View>
              <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
                <View style={{ alignItems: 'center', justifyContent: 'center', }}>
                  <Image resizeMode='cover' style={{ width: 52, height: 52 }} source={require('../../static/images/sherd2.png')} />
                  <Text style={{ fontSize: 13, color: '#8A90A8', lineHeight: 18, marginTop: 13 }}>QQ</Text>
                </View>
              </View>
              <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
                <View style={{ alignItems: 'center', justifyContent: 'center', }}>
                  <Image resizeMode='cover' style={{ width: 52, height: 52 }} source={require('../../static/images/sherd3.png')} />
                  <Text style={{ fontSize: 13, color: '#8A90A8', lineHeight: 18, marginTop: 13 }}>微信朋友圈</Text>
                </View>
              </View>
              <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
                <View style={{ alignItems: 'center', justifyContent: 'center', }}>
                  <Image resizeMode='cover' style={{ width: 52, height: 52 }} source={require('../../static/images/sherd4.png')} />
                  <Text style={{ fontSize: 13, color: '#8A90A8', lineHeight: 18, marginTop: 13 }}>QQ空间</Text>
                </View>
              </View>
            </View>
          </View>
        </Modal>
      </Layout >
    );
  }
}


export default connect(({ userInfo }) => ({
  userInfo,
}))(pureRender(User))
